<template>
  <div>
    <GradientColorPicker v-model:color="gradientColor"></GradientColorPicker>
    <q-btn @click="getColor" label="获取">      
    </q-btn>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, ref } from 'vue';
const PureColorPicker = defineAsyncComponent(() => import('src/components/common/PureColorPicker.vue'));
const GradientColorPicker = defineAsyncComponent(() => import('src/components/common/GradientColorInput.vue'));
import { useMessageNotify } from 'src/hook/common/useMessageNotify';
import GradientColorPicker from 'src/components/common/GradientColorPicker.vue';

export default defineComponent({
  name: 'UserEdit',
  components: {
    PureColorPicker
  },
  setup (props, context) {
    const colorValue = ref('#000000')
    const gradientColor = ref('linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)')
    const {
      showMessage
    } = useMessageNotify();

    const getColor = () => {
      showMessage(gradientColor.value)
    }

    return{
      colorValue,
      gradientColor,
      getColor,
    }
  }

})
</script>

<style scoped>

</style>

